<template>
  <div>
    <ul class="container">
      <li><span class="title">商品名称：</span><span class="value">{{mainList.name}}</span></li>
      <li><span class="title">商品编码：</span><span class="value">{{mainList.code}}</span></li>
      <li><span class="title">商品分类：</span><span class="value">{{mainList.class}}</span></li>
      <li><span class="title">商品租赁(元)：</span><span class="value">{{mainList.rent}}元</span></li>
      <li><span class="title">套餐费(元)：</span><span class="value">{{mainList.setMeal}}元</span></li>
      <li><span class="title">状态：</span><span class="value">{{mainList.status?"有效":'无效'}}</span></li>
      <li><span class="title">生效日期：</span><span class="value">{{mainList.effTime}}</span></li>
      <li><span class="title">失效日期：</span><span class="value">{{mainList.expTime}}</span></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MainVue',
  props:{
    mainList:{
        type:Object
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  list-style: none;
  padding-top: 10px;
  padding-left: 50px;
  li {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    font-size: 14px;
    .value {
        width: 160px;
        color:#666
    }
  }
}
</style>